<div class="nano">
    <div class="nano-content">
        <nav id="menu" class="nav-main" role="navigation">
            <ul class="nav nav-main">
                <li>
                    <a href="{% url 'index' %}">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <span>主页</span>
                    </a>
                </li>
                {% for firstMenu in menuDict.values %}
                    <li class="{{ firstMenu.class }}">
                        <a>
                            <i class="fa {{ firstMenu.icon }}" aria-hidden="true"></i>
                            <span>{{ firstMenu.title }}</span>
                        </a>
                        <ul class="nav nav-children">
                            {% for secondMenu in firstMenu.children %}
                                <li class="{{ secondMenu.class }}">
                                    <a href="{{ secondMenu.url }}">{{ secondMenu.title }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </li>
                {% endfor %}
            </ul>
        </nav>
        <hr class="separator"/>
        <div class="sidebar-widget widget-tasks">
            <div class="widget-header">
                <h6>Projects</h6>
                <div class="widget-toggle">+</div>
            </div>
            <div class="widget-content">
                <ul class="list-unstyled m-none">
                    <li><a href="#">JSOFT HTML5 Template</a></li>
                    <li><a href="#">Tucson Template</a></li>
                    <li><a href="#">JSOFT Admin</a></li>
                </ul>
            </div>
        </div>
        <hr class="separator"/>
        <div class="sidebar-widget widget-stats">
            <div class="widget-header">
                <h6>Company Stats</h6>
                <div class="widget-toggle">+</div>
            </div>
            <div class="widget-content">
                <ul>
                    <li>
                        <span class="stats-title">Stat 1</span>
                        <span class="stats-complete">85%</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-primary progress-without-number"
                                 role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"
                                 style="width: 85%;">
                                <span class="sr-only">85% Complete</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span class="stats-title">Stat 2</span>
                        <span class="stats-complete">70%</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-primary progress-without-number"
                                 role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
                                 style="width: 70%;">
                                <span class="sr-only">70% Complete</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span class="stats-title">Stat 3</span>
                        <span class="stats-complete">2%</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-primary progress-without-number"
                                 role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
                                 style="width: 2%;">
                                <span class="sr-only">2% Complete</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>